<template lang="">
  <div ref="orderEcharts" class="order-echarts-main" />
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    var chart = echarts.init(this.$refs.orderEcharts)
    const mockData = []
    for (var i = 1; i < 80; i++) {
      mockData.push({
        time: 'date-' + i,
        orderNum: Math.ceil(Math.random() * 100),
        backNum: Math.ceil(Math.random() * 100)
      })
    }
    const options = {
      legend: {
        bottom: 10,
        left: 'center',
        textStyle: {
          color: '#9aa8d4'
        },
        data: ['订单', '退单']
      },
      xAxis: {
        type: 'category',
        data: mockData.map((el) => el.time)
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: true
        },
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        }
      },
      tooltip: {
        show: true,
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,.5)',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '订单',
          data: mockData.map((el) => el.orderNum),
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#7D05E2' }, // 柱图渐变色
                { offset: 0.5, color: '#B600FF' }, // 柱图渐变色
                { offset: 1, color: '#BC04E2' } // 柱图渐变色
              ]
            )
          }
        },
        {
          name: '退单',
          data: mockData.map((el) => el.backNum),
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#24CBFF' }, // 柱图高亮渐变色
                { offset: 0.5, color: '#24A3FF' }, // 柱图高亮渐变色
                { offset: 1, color: '#2492FF' } // 柱图高亮渐变色
              ]
            )
          }
        }
      ]
    }
    chart.setOption(options)
  }
}
</script>
<style lang="scss" scoped>
.order-echarts-main {
  width: 100%;
  height: 100%;
}
</style>
